import "./index.scss";
import styles from "./index.module.scss";
import ModelView from "./components/modelView";
import ModelViewCenter from "./components/modelViewCenter";
import Cash from "./components/cash";
import Accept from "./components/accept";
import Invoicing from "./components/invoicings";
import Po from "./components/po";
import Cost from "./components/cost";
import Loan from "./components/loan";
import Entertain from "./components/entertain";
import Profit from "./components/profit";
import Gross from "./components/gross";
import OutValue from "./components/outValue";
import iconXj from "@/assets/public/icon-xj.png";
import iconXjLight from "@/assets/public/icon-xj-light.png";
import iconYs from "@/assets/public/icon-ys.png";
import iconYsLight from "@/assets/public/icon-ys-light.png";
import iconKp from "@/assets/public/icon-kp.png";
import iconKpLight from "@/assets/public/icon-kp-light.png";
import iconPo from "@/assets/public/icon-po.png";
import iconPoLight from "@/assets/public/icon-po-light.png";
import iconJk from "@/assets/public/icon-jk.png";
import iconJkLight from "@/assets/public/icon-jk-light.png";
import iconZd from "@/assets/public/icon-zd.png";
import iconZdLight from "@/assets/public/icon-zd-light.png";
import iconJy from "@/assets/public/icon-jy.png";
import iconJyLight from "@/assets/public/icon-jy-light.png";
import router from "@/router";
import { useSelector } from "react-redux";

export default function Operates() {
  const theme = useSelector((state) => state.theme);
  return (
    <div className={styles.container}>
      <div className={styles.leftContent}>
        <ModelView
          title="现金流"
          contentSLot={Cash}
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconXjLight : iconXj}
                alt="加载中..."
              />
            );
          }}
          height="190"
        ></ModelView>
        <ModelView
          title="验收情况"
          contentSLot={Accept}
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconYsLight : iconYs}
                alt="加载中..."
              />
            );
          }}
          height="190"
        ></ModelView>
        <ModelView
          title="开票情况"
          contentSLot={Invoicing}
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconKpLight : iconKp}
                alt="加载中..."
              />
            );
          }}
          height="190"
        ></ModelView>
        <ModelView
          title="po信息"
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconPoLight : iconPo}
                alt="加载中..."
              />
            );
          }}
          contentSLot={Po}
          height="260"
        ></ModelView>
      </div>
      <div className={styles.centerContent}>
        <ModelViewCenter
          title="经营利润"
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconJyLight : iconJy}
                alt="加载中..."
              />
            );
          }}
          contentSLot={Profit}
          height="265"
        ></ModelViewCenter>
        <ModelViewCenter
          title="经营产值"
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconJyLight : iconJy}
                alt="加载中..."
              />
            );
          }}
          contentSLot={OutValue}
          height="265"
        ></ModelViewCenter>
        <ModelViewCenter
          title="毛利率"
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconJyLight : iconJy}
                alt="加载中..."
              />
            );
          }}
          contentSLot={Gross}
          height="265"
        ></ModelViewCenter>
      </div>
      <div className={styles.rightContent}>
        <ModelView
          title="成本总览"
          contentSLot={Cost}
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconXjLight : iconXj}
                alt="加载中..."
              />
            );
          }}
          height="374"
        ></ModelView>
        <ModelView
          title="借款未冲销金额"
          contentSLot={Loan}
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconJkLight : iconJk}
                alt="加载中..."
              />
            );
          }}
          height="238"
        ></ModelView>
        <ModelView
          title="招待费&会务费"
          contentSLot={Entertain}
          imgSlot={() => {
            return (
              <img
                className={theme ? styles.iconTitleLight : styles.iconTitle}
                src={theme ? iconZdLight : iconZd}
                alt="加载中..."
              />
            );
          }}
          height="238"
        ></ModelView>
      </div>
    </div>
  );
}
